<template>
    <div class="hello">


        <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'child'}">
                <el-table-column
                prop="menuName"
                label="名称"
                width="180">
                </el-table-column>
                <el-table-column
                width="70"
                align="center"
                label="图标">
                    <template slot-scope="scope">
                        <i :class="scope.row.icon"></i>
                    </template>
                </el-table-column>
                <el-table-column
                prop="description"
                label="描述"
                align="center"
                width="120">
                </el-table-column>

                <el-table-column
                prop="urlPath"
                label="路径"
                align="center"
                width="120">
                </el-table-column>

                <el-table-column
                prop="sorts"
                label="排序"
                align="center"
                width="70">
                </el-table-column>

                <el-table-column
                prop="cTime"
                width="160"
                align="center"
                label="创建时间">
                </el-table-column>

                <el-table-column
                prop="mTime"
                width="160"
                align="center"
                label="更新时间">
                </el-table-column>
                <el-table-column
                label="操作">
                <template slot="header" slot-scope="scope">
                    <el-button
                            size="mini"
                            icon="el-icon-circle-plus"
                            type="success"
                            @click="handleAdd(0)">添加</el-button>
                </template>

                    <template slot-scope="scope">
                        <!--当是父菜单才有该操作-->
                        <template v-if="scope.row.parentId==0">
                            <el-button
                            size="mini"
                            icon="el-icon-circle-plus"
                            type="success"
                            @click="handleAdd(scope.row.id)">添加</el-button>
                        </template>
                        
                        <el-button
                            size="mini"
                            icon="el-icon-edit"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                            size="mini"
                            icon="el-icon-delete"
                            type="danger"
                            @click="handlerDelet(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>

    </el-table>

<!--  弹出框处理 -->
  <el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="40%"
  >

    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="菜单名称">
                <el-input v-model="form.menuName"></el-input>
        </el-form-item>
        <el-form-item label="图标">
                <el-input v-model="form.icon"></el-input>
        </el-form-item>
        <el-form-item label="路径">
                <el-input v-model="form.urlPath"></el-input>
        </el-form-item>
        <el-form-item label="描述">
                <el-input v-model="form.description"></el-input>
        </el-form-item>

        <el-form-item label="排序">
                <el-input v-model="form.sorts"></el-input>
        </el-form-item>
    </el-form>
    

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false;handleOk()">确 定</el-button>
  </span>
</el-dialog>


    </div>
  </template>
  
  <script>
  export default {
    name: 'Menu',
    data() {
      return {
        tableData: [],
        title:'',
        dialogVisible:false,
        form:{
            id:0,
            parentId:0,
            menuName:'',
            sorts:0,
            description:0,
            icon:'',
            urlPath:''
        }
      }
    },
    created(){
        this.loadMenu()
    },
    methods: {
        loadMenu(){
            this.api.loadAllMenu().then(res=>{
                if(res.code==0){
                    this.tableData=res.data;
                }
            },err=>{});
        },
        handleOk(){
            var param=this.form;
            var result="";
            for(var name in param){
                if(!(name=="id"&&param[name]==0)){
                    result+=name+"="+param[name]+"&";
                }
            }
            this.api.addMenu(result).then((res)=>{
                if(res.code==0){
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: res.message
                    });
                }
                this.loadMenu();
            })
        },
        handleAdd(pid){
            this.form.id=0;
            this.dialogVisible=true;
            this.form.parentId=pid;
            this.form.menuName="",
            this.form.sorts=0,
            this.form.description="",
            this.form.icon="",
            this.form.urlPath="";
            this.title="添加菜单";
        },
        handleEdit(index, row){
            console.log(index, row);
            debugger;
            this.form.id=row.id;
            this.dialogVisible=true;
            this.form.parentId=row.parentId;
            this.form.menuName=row.menuName,
            this.form.sorts=row.sorts,
            this.form.description=row.description,
            this.form.icon=row.icon,
            this.form.urlPath=row.urlPath;
            this.title="编辑菜单";

        },
        handlerDelet(id){
            this.$confirm("确定删除该菜单？","提示",{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
            }).then(()=>{
                this.api.deleteMenu(id).then((res)=>{
                    if(res.code==0){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.message
                        });
                    }
                    this.loadMenu();
                });
            }).catch(()=>{
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });          
            });
        }
    },
  }

  </script>
  <style scoped>
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
  </style>
  